@extends('layouts.header')
@section('title','使用记录')
@section('content')
    <div class="useRecord">
        <div class="banner">
            <img src="{{asset('images/banner@2x.png')}}" alt="">
        </div>
        {{--<div class="useRecordArea">
            <div class="useRecordTitle">选择日期</div>
            <div class="dateKongjian">
                <div class="date" id="dataPicker">
                    2018年12月
                </div>
            </div>
        </div>--}}
        <div class="useRecordArea">
            <div class="useRecordTitle">使用记录</div>
            @if( ! $records)
                <!-- 没有数据 -->
                    <div class="noData">
                        <img src="{{asset('icon/xiaofeiji@2x.png')}}" alt="">
                        <div>暂无使用记录</div>
                    </div>
            @else
                <ul class="useRecordList">
                    @foreach($records as $record)
                        <li><span>设备号：{{$record->grip->grip_number}}</span><span>{{$record->created_at}}</span></li>
                    @endforeach
                </ul>
                <div class="nodata">没有更多记录了</div>
            @endif
        </div>
    </div>
@endsection
@push('js')
    <script>
        $("#dataPicker").click(function () {
            var this_ = this;
            var date = new Date();
            var m = date.getMonth();
            var y = date.getFullYear();
            var dtpicker = new mui.DtPicker({
                type: "month",//设置日历初始视图模式
                beginDate: new Date(2017, 01),//设置开始日期
                endDate: new Date(y, m),//设置结束日期
                labels: ['年', '月'],//设置默认标签区域提示语
            })
            dtpicker.show(function (res) {
                var year = res.y.valur; // 选择的年
                var month = res.m.valur; // 选择的月
                //$("#isShow").show();
                return true;
                // 这有一个ajax
                $.ajax({
                    url: "{{ route('user.delete') }}",
                    type: "POST",
                    data: {},
                    success: function (res) {
                    }
                });
            });
        });
    </script>
@endpush


